[Cocos2d-x]10分でできるCocos Code IDEの導入手順[iOS][Android]

Cocos2d-xとは

こんにちは！今回はスマートフォンゲーム開発において、Unityに並んで最も使われているCocos2d-xについての記事を書きます。

まずはCocos2d-xの良さを知って頂きましょう。

• iOS・Androidを1つのソースコードで同時に開発できる。
• オープンソースのフレームワークなので、内部的に何をしているかがわかりやすい。
• 海外のフレームワークにも関わらず、日本のコミュニティ（cocos2d-x.jp）が活発で、どうしてもわからないことは誰かに質問もできる。
• 勉強会やノウハウの共有ができる機会が多い。
• アニメーション・パーティクル（爆発やキラキラなどのエフェクト）がはじめから用意されている。
• 用意されている画面遷移の種類が豊富。
• パラパラアニメが簡単に作れる。
• AppStore・GooglePlayのランキング上位にCocos2d-x製のゲームが多い。
• 別途エディターを用いることによってFlashライクにも作れる。
• Box2Dなど、物理エンジンを用いてもパフォーマンスが出せる。
• デバッグ時はデフォルトでフレームレートや描画オブジェクト数が表示されるため、どの処理が原因でパフォーマンスが落ちているのかを、エンジニア以外でも特定しやすい。
• js、Luaで書いたスクリプトをC++のコードから呼び出せるため、使える言語が選べる。

※日本公式コミュニティの管理人様から許可を頂いて非公開グループながらリンクさせて頂きました。現在cocos2d-x.jpは1400人超の大型コミュニティです。開発者の皆様は是非加入申請をしてみて下さい。

私が使って来た印象としては開発者がゲームのロジックに集中できた。という感じです。

良い事もあれば人によっては以下のように悩ましいこともあります。

• 基本的にC++言語で書くため、スマートフォンアプリ開発のみをやっている方には馴染みにくいかもしれない。
• ビルドに長い時間がかかる。
• ネイティブの処理（ゲームセンターなど、iOSにしかない機能）はObjective-C・Javaで書いたものをC++のコード、もしくはJNI（Javaネイティブ拡張コード）から呼び出すため、それぞれの言語の知識が必要なことも少なくない。
• 自社の仕様にあったライブラリとして拡張していくとアップデートができなくなる。（当然ながら）
• アップデートが早く、使えなくなるクラスや名前の変わるクラスもある。既存コードそのままにCocos2d-xのバージョンを上げると動かなくなったり、警告が増えたりする。

しかしながら、ゲーム開発に馴染んできますととても早く、コストパフォーマンスの良いゲームが作れると思います。

一発当たる話題のゲームを作ることによってストアランキング上位デベロッパーへの道を駆け上がれる夢もあります。

Cocos Code IDEのリリース

それでは本題に入ります。

先日Cocos Code IDEが公式サイトから発表されました。

こちらにて導入方法が紹介されていますが、試しにデバッグまでをやってみたので画像ベースで紹介していきます。

Android導入編（要ADT）

公式サイトSDKダウンロードページから最新のCocos2d-x（2014/04/19現在、v3.0rc2の方）をダウンロードしてきたものを任意の場所で解凍します。私はUserのホームディレクトリ直下にしました。

次にCocos Code IDEダウンロードページから自分のOSにあったIDEをダウンロードして、同じく任意の場所で解凍します。私はアプリケーションディレクトリに置きました。

こちらのCocos Code IDE.appをダブルクリックで起動します。

基本的にはeclipseの拡張アプリです。eclipse同様、ワークスペースの設定を行います。

設定したら起動してみましょう。こんな感じで表示されていますか？

jsb（Cocos2d-x Javascript Bindings）で以前はアプリを作っていましたので、今回は本家中国では大半の技術者が使っていると噂のLuaを選択します。

こちらに先ほどCocos2d-xのSDKを配置したディレクトリを指定します。

その後、Cocosのタブを選択し、SDK、NDK、ANTのロケーションを設定します。

この辺りは既にAndroidの開発をしていればサクッとできると思いますが、わからない方はAndroidSDKやNDKをダウンロードして来て下さい。

ファイルエクスプローラー（左側の枠内）で右クリック → New → Cocos Lua Projectから新規のプロジェクトを作ります。

そのままFinishを選択し、サンプルプロジェクトが出来上がりました。

プロジェクトファイルを右クリック → Debug As → 1 Cocos Luabindingで謎のサンプルアプリ（公式）がデバッグ起動されます。

MacでのLuaアプリケーションは起動がとっても早いですね。

次はAndroidのエミュレータで起動してみましょう。

右クリック → Debug As → Debug Configulations...でAndroidを選択し、Use Adb Modeにチェックしません。実機をつないで、右下のDebugを押します。

手持ちにAndroidデバイスがなかったのでエラーが出ていますが、実機が認識できていれば正常に実行できるでしょう。

Androidはこれで導入は完了です。

iOS導入編（要Xcode）

右クリック → Debug As → Debug Configulations...でiOSを選択し、Use iOS Simulatorをチェックします。その後右下のDebugを押します。

こんな感じで表示されたら成功です。簡単ですね。

ブレークポイントで止めよう

スクリプト言語（Cocos2d-x Lua・jsb）の弱点として、

• 詳細な型チェックがビルド時にできないのでエラーがあるかは実行してみるまでわかりにくい。（大規模なアプリになってくると設計次第ではバグの温床になる可能性があり、修正もしづらくなる。）
• デバッグしづらい。（特定のブラウザやプラグインを入れていないとで気軽にデバッグできない。）

などがあります。

Cocos Code IDEはAndroid（eclipse）とほとんど同じようにデバッグできます。eclipseはデバッグが優秀なのでとても良いですね。

デバッグ方法についてはeclipseのデバッグを参考にして下さい。

スクリプト言語ならではのリアルタイムデバッグ

デバッグでシミュレータを表示したまま、CocosLuaGame → src → main.luaファイルをダブルクリックします。

75行目を変更します。

x = x + 10

変更を保存します。MacならCommand + S、WIndowsならControl + Sですね。

するとどうでしょう。今シミュレータで動いていたキャラクターの動作速度が10倍になりましたか？

なぜアプリケーションの実行中に挙動が変えられるのか

普通、C++で書いたCocos2d-xのアプリケーションはコンパイル時に型チェックなどのエラー判定を行っていて、それをコンパイル後にバイナリファイルへと変換して、端末はそれを実行しています。

Luaスクリプトはアプリケーションの実行時にC++の命令によって、ファイルが読み込まれ実行されます。

参照しているLuaファイルが変更（して保存）されたことによって実行中のLuaファイルを上書きしているのでしょうか。実行中に挙動を変更することができました。

座標チェック、当たり判定のチェック、アニメーションの動作チェック、こういった事に今まではデバッグの時間を多く費やした開発者も多いと思います。

しかし実行しながら挙動を変更できることによって、開発時間を短縮できるでしょう。

まとめ

今までのCocos2d-xはiOS（Xcode）で大半をデバッグし、完成したらAndroid（eclipse）に移してオマケのように書き出していましたが、今回はAndroid先行（先にeclipseでデバッグ）でも作れそうです。

eclipseに慣れていてXcodeが使いづらいと思っていた開発者にはCocos Code IDEはとても良いアプリだと思います。

これを機に今までCocos2d-x v2.xで開発を行っていた方や、C++でビルドが遅い！など思われていた方は使ってみても良いと思います。